// 创建一个画布
const canvas = wx.createCanvas()

// 可以看作画笔
const ctx = canvas.getContext('2d') // 创建一个 2d ctx

// 获取窗口宽高
const {
  windowWidth,
  windowHeight
} = wx.getSystemInfoSync()
// 设置填充颜色
ctx.fillStyle = "#f8d263"
// 用矩形填充整个背景
ctx.fillRect(0, 0, windowWidth, windowHeight)

const left = 20; // 距离左边的距离
const gezi = (windowWidth - left) / 15; // 格子大小
const w = 14 * gezi; // 棋盘宽度
const top = 100; // 距离上边的距离



// 循环绘制棋盘
for (var i = 0; i < 15; i++) {
  // 画横线
  drawLine(left, top + i * gezi, left + w, top + i * gezi);
  // 画竖线
  drawLine(left + i * gezi, top, left + i * gezi, top + w);
}

drawQizi(100,100,true)

var isWhite = false;
wx.onTouchStart(function(e){
  var touch = e.changedTouches[0]
  var clientX = touch.clientX
  var clienty = touch.clientY
  drawQizi(clientX,clienty,isWhite)
  isWhite = !isWhite;
})


// 画线
function drawLine(x, y, ex, ey) {
  // 画一条线
  ctx.beginPath();
  //设置笔触的颜色
  ctx.strokeStyle = "#000";
  //设置开始坐标
  ctx.moveTo(x, y);
  //设置结束坐标
  ctx.lineTo(ex, ey);
  //绘制线条
  ctx.stroke();
}

// 画棋子
function drawQizi(x, y, isWhite) {
  ctx.fillStyle = isWhite?"#fff":"#000000";
  ctx.beginPath();
  ctx.arc(x, y, gezi/2-5, Math.PI * 2, 0, true);
  ctx.closePath();
  ctx.fill();
}